<template>
  <div class="box">
    <div class="title"><p>热门景区排行</p></div>
    <!--图形图表的容器-->
    <div class="charts" ref="EchartsVc"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {EChartsType} from "echarts";


let EchartsVc = ref<any>()


onMounted(() => {
  let mychart: EChartsType = echarts.init(EchartsVc.value)
  mychart.setOption({
    //标题组件
    title: {
      //主标题
      text: '景区排行',
      left: '40%',
      textStyle: {
        color: 'yellowgreen',
        fontSize: 20
      }
    },
    //X|Y轴
    xAxis: {type: 'category'},
    yAxis: {
      splitLine: {show: false},
      axisLine: {show: true},
      axisLabel: {show: true},
    },
    grid: {
      top: 20,
      left: 35,
      right: 20,
      bottom: 35
    },
    //系列:决定图形图表是哪一种
    series: [
      //柱状图
      {
        type: 'bar',
        data: [10, 51, 30, 62, 31, 23, 89],
        //柱状图的文本标签
        label: {
          show: true,
          //标签的位置
          position: 'insideTop'
        },
        //柱条的样式
        itemStyle: {
          borderRadius: [50, 50, 0, 0],
          //柱条的颜色
          color: (data: any) => {//给每个柱条设置不同的颜色
            let arr = ['red', 'orange', 'yellowgreen', 'hotpink', 'purple', 'skyblue', 'green'];
            return arr[data.dataIndex];
          }
        }
      },

      //折线图
      {
        type: 'line',
        data: [51, 62, 32, 84, 62, 84, 65],
        smooth: true,
      }


    ],

    //提示框组件
    tooltip: {
      backgroundColor: 'white'
    }

  })
})

</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: rgba(168, 178, 177, 0.35);

  .title {
    margin-top: 20px;
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 50px);
  }
}
</style>